import { computed, ref } from "vue"
import { useThemeStore } from "@/stores/theme"
import VariableName from "@/stores/theme/variable-name"
import { useApplicationStore } from "@/stores/application"

export function useDockStyle() {
  const themeStore = useThemeStore()

  const placement = themeStore.getVariableRef(VariableName.Dock.placement)
  const popoverPlacement = computed(() => {
    switch (themeStore.getVariable(VariableName.Dock.placement)) {
      case "bottom":
        return "top"
      case "left":
        return "right"
      case "right":
        return "left"
    }
    return "top"
  })
  const autoHide = computed(() => themeStore.getVariable(VariableName.Dock.autoHide) === "true")

  //开启自动隐藏时，用于判断过渡动画是否完成
  const bodyLeave = ref(true)

  //dock开启自动隐藏时，用于控制dock内容展示的控制器
  const show = ref(false)

  //鼠标划入放误触的计时器
  const timer = ref()

  //鼠标划入一段时间后再触发，防止误触
  function isShowDockBody(flag: boolean) {
    if (flag) {
      timer.value = setTimeout(() => {
        show.value = true
        bodyLeave.value = false
      }, 150)
    } else {
      clearTimeout(timer.value)
      show.value = false
      timer.value = null
    }
  }

  return { placement, popoverPlacement, autoHide, bodyLeave, show, isShowDockBody }
}

export function useDockApplications() {
  const applicationStore = useApplicationStore()
  return applicationStore.applicationsContext.getApplicationsRef(application => application.info.inDock || application.isOpened())
}
